<!--
  @Description:选择楼层类型
  @Author: zqy
  @Date: 2022-12-06 19:10:04
  @Last Modified by:   zqy
  @Last Modified time: 2022-12-06 19:10:04
 -->
<template>
  <div class="floor-type">
    <template v-if="pageData && ![0,1,2].includes(pageData.id)">
      <div v-if="pageData.type!=='product'" class="type-item" @click="selectedType('define_page_picture')">
        <div class="fast-icon">
          <img src="../images/define_page_picture.svg">
        </div>
        <div class="t-name">图片</div>
      </div>
      <div class="type-item" @click="selectedType('define_page_product')">
        <div class="fast-icon">
          <img src="../images/define_page_product.svg">
        </div>
        <div class="t-name">商品</div>
      </div>
    </template>
    <template v-else>
      <!-- <div class="type-item" @click="selectedType('home_page_banner')">
      <div class="fast-icon">
        <img src="../images/home_page_fast_entrance.svg">
      </div>
      <div class="t-name">Banner轮播图</div>
    </div>
    <div class="type-item" @click="selectedType('home_page_navigation')">
      <div class="fast-icon">
        <img src="../images/home_page_fast_entrance.svg">
      </div>
      <div class="t-name">导航</div>
    </div> -->
      <div class="type-item" @click="selectedType('home_page_fast_entrance')">
        <div class="fast-icon">
          <img src="../images/home_page_fast_entrance.svg">
        </div>
        <div class="t-name">快速入口</div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'FloorType',
  props: {
    pageData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {

    }
  },
  created() {

  },

  methods: {
    selectedType(type) {
      this.$emit('change', type)
    }
  }
}
</script>
<style lang='scss' scoped>
.floor-type{
  padding-top: 100px;
  width: 500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  .type-item{
    width: 100px;
    margin:  0 20px;
    cursor: pointer;
    img{
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }
  .fast-icon{
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    img{
      position: absolute;
      left: -15px;
      top: -15px;
      width: 130px;
      height: 130px;
      border-radius: 50%;
    }
  }
  .t-name{
    text-align: center;
    margin-top: 10px;
  }
}
</style>
